html {
    font-size: 100px; //1REM=100PX「在375px的设计稿中」
}

html,
body,
#app {
    height: 100%;
    overflow: hidden;
}

#app {
    position: relative;
    margin: 0 auto;
    max-width: 540px;
    font-size: .14rem;
}

.header-box,
.footer-box,
.main-box {
    box-sizing: border-box;
    height: 1rem;
    overflow: hidden;
}

.main-box {
    height: calc(100vh - 2rem);
}

/* 通用样式 */
@com-green: #31C27C;
@com-gray: rgba(255, 255, 255, .5);

.text-clip {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

/* Loading层 */
.loading-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background: #555;

    display: flex;
    justify-content: center;
    align-items: center;

    .content {

        img,
        span {
            display: block;
        }

        img {
            margin: 0 auto;
            width: .5rem;
            height: .5rem;
        }

        span {
            margin-top: .1rem;
            color: rgb(25, 137, 250);
        }
    }
}

/* 背景层 */
.mark-overlay,
.mark-image {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
}

.mark-image {
    z-index: -2;
    background-repeat: no-repeat;
    background-size: cover;
    filter: blur(6px); // 设置模糊度
}

.mark-overlay {
    z-index: -1;
    background: rgba(0, 0, 0, .5);
}

/* 头部区域样式 */
.header-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .15rem;

    .player-button {
        margin-left: .05rem;
        width: .35rem;
        height: .35rem;
        background: url('../images/music.svg') no-repeat;
        background-size: 100% 100%;

        &.move {
            animation: musicMove 1s linear 0s infinite both;
        }
    }

    .base {
        flex-grow: 1;
        display: flex;

        .cover {
            width: .7rem;
            height: .7rem;
            background: #AAA;

            img {
                display: block;
                width: 100%;
                height: 100%;
            }

            img[src=""] {
                display: none;
            }
        }

        .info {
            flex-grow: 1;
            margin-left: .05rem;
            max-width: 2.3rem;

            .title,
            .author {
                line-height: .35rem;
                color: #fff;
                font-size: .17rem;
                .text-clip;
            }

            .author {
                font-size: .15rem;
            }
        }
    }
}

@keyframes musicMove {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 歌词区域样式 */
.main-box {
    .wrapper {
        transform: translateY(0);
        transition: transform .3s;

        p {
            height: .5rem;
            line-height: .5rem;
            text-align: center;
            font-size: .15rem;
            color: @com-gray;

            &.active {
                color: @com-green;
                transition: color .3s;
            }
        }
    }
}

/* 尾部区域样式 */
.footer-box {
    padding: 0 .1rem;

    .download {
        display: block;
        margin: 0 auto;
        width: 2.13rem;
        height: .5rem;
        line-height: .5rem;
        text-align: center;
        font-size: .18rem;
        color: #fff;
        text-indent: .2rem;
        border-radius: .25rem;
        background: url('../images/sprite_play.png') no-repeat @com-green;
        background-size: .4rem 3.5rem;
        background-position: .1rem -2.915rem;
    }

    .bar {
        display: flex;
        align-items: center;

        .time {
            width: .4rem;
            line-height: .46rem;
            text-align: center;
            font-size: .12rem;
            color: @com-gray;
        }

        .progress {
            position: relative;
            flex-grow: 1;
            height: .02rem;
            background: @com-gray;

            .already {
                position: absolute;
                top: 0;
                left: 0;
                width: 0;
                height: 100%;
                background: @com-green;
            }
        }
    }
}

/* 音频 */
#audioBox {
    display: none;
}